<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      size="small"
      :inline="true"
      v-show="showSearch"
    >
      <!--      <br/>-->
      <el-form-item label="年份" prop="status">
        <el-select
          v-model="queryParams.year"
          placeholder="请选择年份"
          clearable
          style="width: 240px"
          @visible-change="getYears"
        >
          <el-option
            v-for="year in yearList"
            :key="year.id"
            :label="year.name"
            :value="year.id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="月份">
        <el-select
          style="width: 240px"
          v-model="queryParams.months"
          placeholder="请选择月份"
          clearable
        >
          <el-option
            v-for="month in monthList"
            :key="month.id"
            :label="month.name"
            :value="month.id"
          ></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="创建时间">
        <el-date-picker
          v-model="dateRange"
          style="width: 240px"
          value-format="yyyy-MM-dd"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <!--      <br/>-->
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="compute"
          >搜索
        </el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>
    <h2 class="h2">项目组产值统计（按项目组）</h2>
    <div id="chart" style="width: 100%; height: 50vh"></div>
    <h2 class="h2">项目组产值统计（按时间）</h2>
    <div class="top">
      <div class="box">
        <div class="box1">年份</div>
        <el-select
          v-model="zxyear"
          placeholder="请选择年份"
          clearable
          style="width: 240px"
          @visible-change="getYears1"
        >
          <el-option
            v-for="year in yearList"
            :key="year.id"
            :label="year.name"
            :value="year.id"
          ></el-option>
        </el-select>
      </div>
      <div class="box">
        <div class="box1">项目组选择</div>
        <el-select
          v-model="value1"
          multiple
          placeholder="请选择"
          @change="change"
        >
          <el-option
            v-for="item in selectList"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="box">
        <el-button type="primary" @click="search()">搜索</el-button>
        <el-button type="" @click="resh()">重置</el-button>
      </div>
      <div class="box" style="">
        <div class="box11" :class="isindex == 1 ? 'active' : ''" @click="fenji">
          分计
        </div>
        <div class="box22" :class="isindex == 2 ? 'active' : ''" @click="leiji">
          累计
        </div>
      </div>
    </div>

    <div id="chart1" style="width: 100%; height: 50vh"></div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { listDept } from "@/api/system/dept";
import { getChartData, getBroken } from "@/api/chart/chart";

export default {
  name: "histogram",
  data() {
    return {
      is_cz: false,
      issearch: false,
      isindex: 1,
      zxyear: new Date().getFullYear(),
      option: {
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [
            "一月",
            "二月",
            "三月",
            "四月",
            "五月",
            "六月",
            "七月",
            "八月",
            "九月",
            "十月",
            "十一月",
            "十二月",
          ],
        },
        yAxis: {
          type: "value",
        },
        series: [],
      },
      selectList: [
        {
          value: "0",
          label: "全选",
        },
        {
          value: "1",
          label: "i砼",
        },
        {
          value: "2",
          label: "城市更新",
        },
        {
          value: "3",
          label: "uhpc",
        },
        {
          value: "4",
          label: "轻质墙材",
        },
        {
          value: "5",
          label: "风电",
        },
        {
          value: "6",
          label: "化学建材所",
        },
        {
          value: "7",
          label: "重点项目组",
        },
        {
          value: "8",
          label: "总产值",
        },
      ],
      value1: ["1", "2", "3"],
      // 查询参数
      queryParams: {
        year: undefined,
        months: undefined,
      },
      dateRange: [],
      showSearch: true,
      deptList: [],

      chartDataMap: {
        header: [],
        data: {},
        timeData: [],
      },
      yearList: [],
      chartList: [],
      // 月份选择
      monthList: [
        { id: 1, name: "一月" },
        { id: 2, name: "二月" },
        { id: 3, name: "三月" },
        { id: 4, name: "四月" },
        { id: 5, name: "五月" },
        { id: 6, name: "六月" },
        { id: 7, name: "七月" },
        { id: 8, name: "八月" },
        { id: 9, name: "九月" },
        { id: 10, name: "十月" },
        { id: 11, name: "十一月" },
        { id: 12, name: "十二月" },
      ],
      iTong_product: [],
      Uhpc_product: [],
      chem_product: [],
      city_update: [],
      wind_power: [],
      wall_product: [],
      chem_product: [],
      major_product: [],
      all: [],
      iTong_product1: [],
      Uhpc_product1: [],
      chem_product1: [],
      city_update1: [],
      wind_power1: [],
      wall_product1: [],
      chem_product1: [],
      major_product1: [],
      all1: [],
      show_product: [1, 2, 3], // 要展示的项目组
    };
  },
  methods: {
    leiji() {
      this.option.series = [];
      this.isindex = 2;
      this.value1.forEach((item) => {
        if (item == "1") {
          this.option.series.push({
            name: "i砼",
            type: "line",
            stack: "Total1",
            color: "#00A3E0",
            data: this.iTong_product1,
          });
        }
        if (item == "2") {
          this.option.series.push({
            name: "城市更新",
            type: "line",
            stack: "Total2",
            color: "#FFA100",
            data: this.city_update1,
          });
        }
        if (item == "3") {
          this.option.series.push({
            name: "uhpc",
            type: "line",
            stack: "Total3",
            color: "#ffc0cb",
            data: this.Uhpc_product1,
          });
        }
        if (item == "4") {
          this.option.series.push({
            name: "轻质墙材",
            type: "line",
            stack: "Total4",
            color: "#CCCCCC",
            data: this.wall_product1,
          });
        }
        if (item == "5") {
          this.option.series.push({
            name: "风电",
            type: "line",
            stack: "Total5",
            color: "#BBFFAA",
            data: this.wind_power1,
          });
        }

        if (item == "6") {
          this.option.series.push({
            name: "化学建材所",
            type: "line",
            stack: "Total6",
            color: "#749f83",
            data: this.chem_product1,
          });
        }
        if (item == "7") {
          this.option.series.push({
            name: "重点项目组",
            type: "line",
            stack: "Total7",
            color: "#ca8622",
            data: this.major_product1,
          });
        }
        if (item == "8") {
          this.option.series.push({
            name: "总产值",
            type: "line",
            stack: "Total8",
            color: "green",
            data: this.all1,
          });
        }
      });
      this.getChart1();
    },
    fenji() {
      this.option.series = [];
      this.isindex = 1;
      this.value1.forEach((item) => {
        if (item == "1") {
          this.option.series.push({
            name: "i砼",
            type: "line",
            stack: "Total1",
            color: "#00A3E0",
            data: this.iTong_product,
          });
        }
        if (item == "2") {
          this.option.series.push({
            name: "城市更新",
            type: "line",
            stack: "Total2",
            color: "#FFA100",
            data: this.city_update,
          });
        }
        if (item == "3") {
          this.option.series.push({
            name: "uhpc",
            type: "line",
            stack: "Total3",
            color: "#ffc0cb",
            data: this.Uhpc_product,
          });
        }
        if (item == "4") {
          this.option.series.push({
            name: "轻质墙材",
            type: "line",
            stack: "Total4",
            color: "#CCCCCC",
            data: this.wall_product,
          });
        }
        if (item == "5") {
          this.option.series.push({
            name: "风电",
            type: "line",
            stack: "Total5",
            color: "#BBFFAA",
            data: this.wind_power,
          });
        }

        if (item == "6") {
          this.option.series.push({
            name: "化学建材所",
            type: "line",
            stack: "Total6",
            color: "#749f83",
            data: this.chem_product,
          });
        }
        if (item == "7") {
          this.option.series.push({
            name: "重点项目组",
            type: "line",
            stack: "Total7",
            color: "#ca8622",
            data: this.major_product,
          });
        }
        if (item == "8") {
          this.option.series.push({
            name: "总产值",
            type: "line",
            stack: "Total8",
            color: "green",
            data: this.all,
          });
        }
      });
      this.getChart1();
    },
    // 重置
    resh() {
      this.value1 = ["1", "2", "3"];
      this.show_product = ["1", "2", "3"];
      this.is_cz = true;
      this.option.series = [];
      this.getgetBroken();
    },
    // 搜索
    search() {
      this.isindex = 1;
      this.issearch = true;
      this.getgetBroken();
      setTimeout(() => {}, 500);
      setTimeout(() => {
        this.option.series = [];
        this.show_product.forEach((item) => {
          if (item == "1") {
            this.option.series.push({
              name: "i砼",
              type: "line",
              stack: "Total1",
              color: "#00A3E0",
              data: this.iTong_product,
            });
          }
          if (item == "2") {
            this.option.series.push({
              name: "城市更新",
              type: "line",
              stack: "Total2",
              color: "#FFA100",
              data: this.city_update,
            });
          }
          if (item == "3") {
            this.option.series.push({
              name: "uhpc",
              type: "line",
              stack: "Total3",
              color: "#ffc0cb",
              data: this.Uhpc_product,
            });
          }
          if (item == "4") {
            this.option.series.push({
              name: "轻质墙材",
              type: "line",
              stack: "Total4",
              color: "#CCCCCC",
              data: this.wall_product,
            });
          }
          if (item == "5") {
            this.option.series.push({
              name: "风电",
              type: "line",
              stack: "Total5",
              color: "#BBFFAA",
              data: this.wind_power,
            });
          }

          if (item == "6") {
            this.option.series.push({
              name: "化学建材所",
              type: "line",
              stack: "Total6",
              color: "#749f83",
              data: this.chem_product,
            });
          }
          if (item == "7") {
            this.option.series.push({
              name: "重点项目组",
              type: "line",
              stack: "Total7",
              color: "#ca8622",
              data: this.major_product,
            });
          }
          if (item == "8") {
            this.option.series.push({
              name: "总产值",
              type: "line",
              stack: "Total8",
              color: "green",
              data: this.all,
            });
          }
        });
        this.getChart1();
      }, 1000);
    },
    getYears1() {
      const timeOne = new Date();
      const year = timeOne.getFullYear();
      this.yearList = [
        { id: year - 2, name: year - 2 + " 年" },
        { id: year - 1, name: year - 1 + " 年" },
        { id: year, name: year + " 年" },
        { id: year + 1, name: year + 1 + " 年" },
        { id: year + 2, name: year + 2 + " 年" },
      ];
    },
    getgetBroken() {
      getBroken({ year: this.zxyear }).then((res) => {
        if (res.code == 200) {
          this.iTong_product = [];
          this.iTong_product1 = [];
          this.city_update = [];
          this.city_update1 = [];
          this.Uhpc_product = [];
          this.Uhpc_product1 = [];
          this.wall_product = [];
          this.wall_product1 = [];
          this.wind_power = [];
          this.wind_power1 = [];
          this.chem_product = [];
          this.chem_product1 = [];
          this.major_product = [];
          this.major_product1 = [];
          this.all = [];
          this.all1 = [];
          res.data.iTong_product.map((item) => {
            if (item.monthNum != null) {
              this.iTong_product.push(item.outputValue.toFixed(2));
              this.iTong_product1.push(item.allValue.toFixed(2));
            }
          });
          res.data.city_update.map((item) => {
            if (item.monthNum != null) {
              this.city_update.push(item.outputValue.toFixed(2));
              this.city_update1.push(item.allValue.toFixed(2));
            }
          });
          res.data.Uhpc_product.map((item) => {
            if (item.monthNum != null) {
              this.Uhpc_product.push(item.outputValue.toFixed(2));
              this.Uhpc_product1.push(item.allValue.toFixed(2));
            }
          });
          res.data.wall_product.map((item) => {
            if (item.monthNum != null) {
              this.wall_product.push(item.outputValue.toFixed(2));
              this.wall_product1.push(item.allValue.toFixed(2));
            }
          });
          res.data.wind_power.map((item) => {
            if (item.monthNum != null) {
              this.wind_power.push(item.outputValue.toFixed(2));
              this.wind_power1.push(item.allValue.toFixed(2));
            }
          });
          res.data.chem_product.map((item) => {
            if (item.monthNum != null) {
              this.chem_product.push(item.outputValue.toFixed(2));
              this.chem_product1.push(item.allValue.toFixed(2));
            }
          });
          res.data.major_product.map((item) => {
            if (item.monthNum != null) {
              this.major_product.push(item.outputValue.toFixed(2));
              this.major_product1.push(item.allValue.toFixed(2));
            }
          });
          res.data.all.map((item) => {
            if (item.monthNum != null) {
              this.all.push(item.outputValue.toFixed(2));
              this.all1.push(item.allValue.toFixed(2));
            }
          });
          console.log(this.option.series, 8888888888888);
          if (this.is_cz) {
            this.value1.forEach((item) => {
              if (item == "1") {
                this.option.series.push({
                  name: "i砼",
                  type: "line",
                  stack: "Total1",
                  color: "#00A3E0",
                  data: this.iTong_product,
                });
                this.getChart1();
              }
              if (item == "2") {
                this.option.series.push({
                  name: "城市更新",
                  type: "line",
                  stack: "Total2",
                  color: "#FFA100",
                  data: this.city_update,
                });
                this.getChart1();
              }
              if (item == "3") {
                this.option.series.push({
                  name: "uhpc",
                  type: "line",
                  stack: "Total3",
                  color: "#ffc0cb",
                  data: this.Uhpc_product,
                });
                this.getChart1();
              }
            });
            this.is_cz = false;
          }
          if (!this.issearch) {
            this.value1.forEach((item) => {
              if (item == "1") {
                this.option.series.push({
                  name: "i砼",
                  type: "line",
                  stack: "Total1",
                  color: "#00A3E0",
                  data: this.iTong_product,
                });
                this.getChart1();
              }
              if (item == "2") {
                this.option.series.push({
                  name: "城市更新",
                  type: "line",
                  stack: "Total2",
                  color: "#FFA100",
                  data: this.city_update,
                });
                this.getChart1();
              }
              if (item == "3") {
                this.option.series.push({
                  name: "uhpc",
                  type: "line",
                  stack: "Total3",
                  color: "#ffc0cb",
                  data: this.Uhpc_product,
                });
                this.getChart1();
              }
            });
          }
        }
      });
    },
    change(e) {
      e.map((item) => {
        if (item == 0) {
          this.show_product = ["1", "2", "3", "4", "5", "6", "7", "8"];
          this.value1 = ["1", "2", "3", "4", "5", "6", "7", "8"];
        } else {
          this.show_product = e;
        }
      });
    },
    getChart1() {
      console.log(this.option.series, "最终数据========");
      const myCharta = echarts.init(document.getElementById("chart1"));
      myCharta.setOption(this.option, true);
    },
    resetQuery() {
      this.dateRange = [];
      this.queryParams = {
        year: undefined,
        months: undefined,
      };
    },

    // 处理年份数据
    getYears() {
      const timeOne = new Date();
      const year = timeOne.getFullYear();
      // this.zxyear = timeOne.getFullYear();
      this.yearList = [
        { id: year - 2, name: year - 2 + " 年" },
        { id: year - 1, name: year - 1 + " 年" },
        { id: year, name: year + " 年" },
        { id: year + 1, name: year + 1 + " 年" },
        { id: year + 2, name: year + 2 + " 年" },
      ];
    },

    initCharts() {
      getChartData(this.addDateRange(this.queryParams, this.dateRange)).then(
        (response) => {
          var datas = [];

          if (response.data != null) {
            datas = response.data.outputValue;
          }
          // 数据图赋值
          const myChart = echarts.init(document.getElementById("chart"));
          myChart.setOption({
            tooltip: {
              trigger: "axis",
              axisPointer: {
                type: "shadow",
              },
              formatter: (params) => {
                return (
                  params[0].name + ": " + params[0].data + " 万元" + "<br>"
                );
              },
              textStyle: {
                align: "left",
              },
            },

            xAxis: {
              type: "category",
              data: [
                "i砼",
                "城市更新",
                "uhpc",
                "轻质墙材",
                "风电",
                "化学建材所",
                "重点项目组",
                "总产值",
              ],
            },
            yAxis: {
              type: "value",
              name: "单位/万元",
            },
            series: [
              {
                data: datas,
                barWidth: 50,
                type: "bar",
                itemStyle: {
                  normal: {
                    color: function (params) {
                      var colorList = [
                        "#00A3E0",
                        "#FFA100",
                        "#ffc0cb",
                        "#CCCCCC",
                        "#BBFFAA",
                        "#749f83",
                        "#ca8622",
                        "green",
                      ];
                      return colorList[params.dataIndex];
                    },
                  },
                },
              },
            ],
          });
        }
      );
    },

    compute() {
      this.initCharts();
    },
  },
  mounted() {
    // 默认为当年
    this.queryParams.year = new Date().getFullYear();
    this.initCharts();
    this.getgetBroken();
  },
};
</script>

<style scoped>
.active {
  background-color: #1890ff;
  color: #fff;
}
.box11 {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #e5e7ec;
  border-radius: 15px 0 0 15px;
  border-right: 0;
  margin-left: 300px;
}
.box22 {
  width: 50px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border: 1px solid #e5e7ec;
  border-radius: 0 15px 15px 0;
  border-left: none;
}
.h2 {
  text-align: center;
  margin: 50px;
}
.top {
  display: flex;
}
.box {
  display: flex;
  align-items: center;
  margin-right: 20px;
}
.box1 {
  padding-right: 12px;
  color: #606266;
  font-weight: bold;
  font-size: 14px;
}
</style>
